<template>
<scroll class="content">
<div class="reating" ref="reating">
   <!-- <div class="reating-box" > -->
     <div class="header">
       <div class="left">
         <div class="left-content">
           <p class="ratings-num">{{seller.score}}</p>
           <p class="text">综合评分</p>
           <p class="compted">高于周边商家{{seller.rankRate}}%</p>
         </div>
       </div>
       <div class="right">
         <div class="sever-score">
           <p class="text">服务态度<sapn class="score">
             <van-rate allow-half color="red" size="14px" v-model="value1" readonly />
             {{seller.serviceScore}}</sapn></p>
         </div>
         <div class="food-score">
           <p class="text">食品得分<span class="score">
             <van-rate allow-half color="red" size="14px" v-model="value2" readonly />
             {{seller.foodScore}}</span></p>
         </div>
         <div class="arrival-time">
           <p class="text">送达时间<span class="time">
             {{seller.deliveryTime}}</span></p>
         </div>
       </div>
     </div>
     <line-throw></line-throw>
     <div class="reating-text">
         <reating-select @onlycontenttext="onlycontenttext" @select="selected" :onlycontent="onlycontent" :selectedtype="selectedtype" :reating="reating" :desc="desc"></reating-select>
         <!-- <reating-text :reating="reating"></reating-text> -->
         <div class="below">
          <ul class="reating-ul" v-for="(item,index) in reatingtext" :key="index">
              <li class="reating-list">
                  <div class="area">
                      <div class="left"><img class="img" width="30px" height="30px" :src="item.avatar" alt=""></div>
                      <div class="right">
                          <div class="top-header">
                          <div class="name">{{item.username}}</div>
                          <div class="rating-time">{{format(item.rateTime)}}</div>
                          </div>
                          <div class="star"><span class="delvertime">{{item.deliveryTime}}分钟送达</span></div>
                          <div class="detail">{{item.text}}</div>
                          <div class="tab-option">
                              <ul class="option-ul" v-for="(item,index) in item.recommend" :key="index">
                                  <li class="option-li"><span>{{item}}</span></li>
                              </ul>
                          </div>
                      </div>
                  </div>
              </li>
          </ul>
         </div>
     </div>
   <!-- </div> -->
</div>
</scroll>
</template>
<script>
// import BScroll from 'better-scroll'
import moment from 'moment'
import Scroll from '../components/scroll/Scroll'
import LineThrow from '../components/linetrown/LineThrow'
import ReatingSelect from '../components/reating/ReatingSelect'
// import ReatingText from '../components/reating/ReatingText'
export default {
  name: 'ratings',
  data () {
    return {
      desc: {
        all: '全部',
        satisfied: '好评',
        dissatisfied: '差评'
      },
      selectedtype: 2,
      onlycontent: false,
      value1: this.seller.serviceScore,
      value2: this.seller.foodScore
    }
  },
  props: {
    seller: {
      type: Object
    },
    reating: {
      type: Array
    }
  },
  computed: {
    reatingtext () {
      const ret = []
      this.reating.forEach((reating) => {
        if (this.onlycontent && !reating.text) {
          return
        } if (this.selectedtype === 2 || this.selectedtype === reating.rateType) {
          ret.push(reating)
        }
      })
      return ret
    }
  },
  methods: {
    selected (type) {
      this.selectedtype = type
    },
    onlycontenttext () {
      this.onlycontent = !this.onlycontent
    },
    format (time) {
      return moment(time).format('YYYY-MM-DD HH:mm')
    }
    // initscroll () {
    //   if (!this.scroll) {
    //     this.scroll = new BScroll(this.$refs.reating, {
    //       click: true
    //     })
    //   } else {
    //     this.scroll.refresh()
    //   }
    // }
  },
  // events: {
  //   'selected' (type) {
  //     this.selectedtype = type
  //   },
  //   'onlycontenttext' () {
  //     this.onlycontent = !this.onlycontent
  //   }
  // },
  mounted () {
    // this.$nextTick(() => {
    // this.initscroll()
    // })
  },
  components: {
    LineThrow,
    ReatingSelect,
    Scroll
    // ReatingText
  }
}
</script>
<style scoped lang="scss">
  .content{
    height: 100vh;
    overflow: hidden;
    background-color: red;
    .reating{
    // position: fixed;
    //   // display: flex;
    //   top: 192px;
    //   right: 0px;
    //   bottom: 0;
    //   left: 0;
    //   // width: 100%;
    //   overflow: hidden;
    // .reating-box{
      // width: 100%;
      // height: 100%;
      .header{
        width: 100%;
        display: flex;
        .left{
          width: 137px;
          text-align: center;
          border-right: 1px solid darkgray;
          padding: 18px 0;
          .left-content{
            line-height: 22px;
            .ratings-num{
              font-size: 22px;
              color: orange;
            }
            .compted{
              font-size: 14px;
            }
          }
        }
        .right{
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding: 0 24px;
          .sever-score,.food-score,.arrival-time{
            line-height: 24px;
             .text{
               font-size: 16px;
               .score{
               color: orange;
               margin-left: 12px;
             }
             .time{
               color: darkgray;
               margin-left: 12px;
             }
             }

          }
        }
      }
      .reating-text{
        .below{
          //  height: 496px;
          //  width: 100%;
          //  overflow: hidden;
           .reating-ul{
              .reating-list{
                .area{
                    padding: 18px;
                    display: flex;
                    .left{
                      .img{
                          border-radius: 50%;
                      }
                    }
                    .right{
                        line-height: 20px;
                        margin-left: 12px;
                       .top-header{
                           display: flex;
                           justify-content: space-between;
                          .name{
                            font-size: 16px;
                           }
                           .rating-time{
                               color: darkgray;
                           }
                       }
                       .star{
                          .delvertime{}
                       }
                       .detail{}
                       .tab-option{
                           display: flex;
                           flex-wrap: wrap;
                          .option-ul{
                            //   display: flex;
                            margin: 2px 2px;
                            border: 1px solid darkgray;
                            padding: 2px 4px;
                            .option-li{
                                font-size: 12px;
                                color: rgb(134, 133, 131);
                            }
                          }
                       }
                    }
                }
              }
           }
       }
      }
    // }
  }
  }
</style>
